<template>
  <div class="module">
    <div class="menu-top">
      <div class="menu-left">
        <div v-for="(menu,index) in topLeftMenu" :key="index" class="menu-div" :class="menu.show ? 'menu-choice':''" @click="choiceMenu(menu)">{{ menu.label }}</div>
      </div>
      <div class="menu-right">
        <div v-for="(menu,index) in topRightMenu" :key="index" :title="menu.label" class="menu-btn menuBg"  @click="choiceMenuBtn(menu)">
          <img class="menu-img" :src="menu.imgUrl"></img>
        </div>
        <div title="返回首页" class="menu-btn homeBg" @click="returnHome()"></div>
      </div>
    </div>
    <div class="mine-content">
      <mine-tree-card-child v-show="menuNow.id == 1 && menuNow.show" @closeMineTree="closeModel"></mine-tree-card-child>
      <SlopeProperties v-if="menuNow.id == 2 && menuNow.show" @closeSlope="closeModel"></SlopeProperties>
      <RiskStatistics v-if="menuNow.id == 3 && menuNow.show" @closeRisk="closeModel"></RiskStatistics>
    </div>
  </div>
</template>

<script setup>
import { emitter } from "@/utils/events";
import { ElMessage } from 'element-plus'
import MineTreeCardChild from "@/components/MineTreeCard/MineTreeCardChild"; // 矿山名录
import RiskStatistics from "./modules/RiskStatistics" // 设备预警统计
import SlopeProperties from "./modules/slopeProperties" // 边坡性质
import useOnemapStore from "@/store/modules/onemap";
const onemapStore = useOnemapStore();
const topLeftMenu = ref([
  {id: 1, label: '矿山名录', show: false},
  {id: 2, label: '边坡性质', show: false},
  {id: 3, label: '边坡风险', show: false},
  {id: 4, label: '边坡分区', show: false},
])
const topRightMenu = ref([
  {id: 5, label: '坡顶坡底线提取', imgUrl:'/images/btn/pdpdx.png', show: false},
  {id: 6, label: '台阶高度超限提取', imgUrl:'/images/btn/tjgd.png', show: false},
  {id: 7, label: '台阶坡面角超限提取', imgUrl:'/images/btn/pmj.png', show: false},
  {id: 8, label: '平盘宽度超限提取', imgUrl:'/images/btn/ppkd.png', show: false},
])
const menuNow = ref({id: 1, label: '矿山名录', show: false})
// 监听地图是否加载完毕 mapOnload-当前页面路由name
let mapInstance; // 量算函数
emitter.once("mapOnload", (map) => {
  mapInstance = map;
});

onActivated(() => {
  // 再次打开页面时在这里初始化地球中的内容
  console.log("组件被激活");
});

onDeactivated(() => {
  // 在这里清除本页面地图中的的加载内容
  console.log("组件被停用");
});
// menu切换
function choiceMenu(menu) {
  if (!onemapStore.currentOpenPitInfo.openPitNo && menu.id != 1) {
    ElMessage({
      showClose: true,
      message: '请先选择矿山',
      type: 'warning',
    })
  } else {
    topLeftMenu.value.forEach(item => {
      if (menu.id == item.id) {
        item.show = !menu.show
      } else {
        item.show = false
      }
    });
    menuNow.value = menu
  }
}
// 关闭模态框
function closeModel(id) {
  if (menuNow.value.id == id) {
    menuNow.value.show = false
    topLeftMenu.value.forEach(item => {
      if (id == item.id) {
        item.show = false
      }
    });
  }
}

// 选中按钮
function choiceMenuBtn(menu) {
  ElMessage({
    message: '请先上传无人机点云数据（格式为.las）',
    type: 'warning',
    plain: true,
  })
}

// 返回首页
function returnHome() {
  mineTreeRef.value.toHome()
}
</script>

<style lang="scss" scoped>
.module {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  position: relative;
  .menu-top {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    >div {
      height: 50px;
    }
    .menu-left {
      width: 70%;
      display: flex;
      align-items: center;
    }
    .menu-right {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: end;
      padding-right: 5px;
    }
    .menu-div {
      width: 110px;
      height: 34px;
      background-image: url('@/assets/images/green/menu-child.png');
      background-size: 100% 100%;
      margin-right: 20px;
      line-height: 34px;
      text-align: center;
      color: #eef1fa;
      font-family: PangMen;
      font-size: 16px;
      cursor: pointer;
    }
    .menu-div:active {
      scale: 0.9;
      background-image: url('@/assets/images/green/menu-child-active.png');
      background-size: 100% 100%;
    }
    .menu-choice {
      background-image: url('@/assets/images/green/menu-child-active.png');
      background-size: 100% 100%;
    }
    .menu-btn {
      height: 46px;
      width: 46px;
      cursor: pointer;
      margin-left: 20px;
      .menu-img {
        width: 22px;
        height: 22px;
        margin: 12px;
      }
    }
    .menu-btn:active {
      scale: 0.9;
    }
    .menuBg {
      background-image: url('@/assets/images/green/menu-bg.png');
      background-size: 100% 100%;
    }
    .homeBg {
      background-image: url('@/assets/images/green/home-btn.png');
      background-size: 100% 100%;
    }
  }
  .mine-content {
    width: 370px;
    height: calc(100% - 100px);
    position: absolute;
    left: 8px;
    top: 60px;
  }
  .bottom-content {
    width: 900px;
    height: 100px;
    border: 1px solid orange;
    background-color: rgba(0, 50, 50, 0.9);
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, -40%);
  }
}
</style>